<template>
  <n-grid cols="24" x-gap="10" item-responsive responsive="screen" style="width: 100%; height: 100%">
    <n-grid-item span="24 m:24 l:24">
      <n-space :wrap-item="false">
        <n-card
          :segmented="{ content: true, footer: 'soft' }"
          header-style="font-size:14px;"
          title="添加用户"
        >
          <template #header-extra> 新增 </template>
          <n-form
            ref="formRef"
            :model="compData.from"
            :rules="compData.rules"
            label-placement="left"
            label-width="auto"
            require-mark-placement="right-hanging"
          >
            <n-form-item label="用户名" path="name">
              <n-input
                v-model:value="compData.from.name"
                placeholder="请输入用户名"
              />
            </n-form-item>
            <n-form-item label="邮箱" path="email">
              <n-auto-complete
                v-model:value="compData.from.email"
                :input-props="{ autocomplete: 'disabled' }"
                :options="compData.emailOptions"
                placeholder="请输入邮箱"
              />
            </n-form-item>
            <n-form-item label="账号" path="account">
              <n-input
                v-model:value="compData.from.account"
                placeholder="请输入账号"
              />
            </n-form-item>
            <n-form-item label="密码" path="password">
              <n-input
                v-model:value="compData.from.password"
                type="password"
                placeholder="请输入密码"
              />
            </n-form-item>
            <n-form-item label="生日" path="birthday">
              <n-date-picker
                clearable
                value-format="yyyy-MM-dd"
                v-model:formatted-value="compData.from.birthday"
                type="date"
              />
            </n-form-item>
            <n-form-item label="性别" path="sex">
              <n-radio-group v-model:value="compData.from.sex">
                <n-radio-button :value="1">男</n-radio-button>
                <n-radio-button :value="2">女</n-radio-button>
              </n-radio-group>
            </n-form-item>
            <n-form-item label="工作城市" path="life_address">
              <n-input
                v-model:value="compData.from.life_address"
                placeholder="请输入工作城市"
              />
            </n-form-item>
          </n-form>
          <template #action>
            <n-space justify="end">
              <n-button attr-type="button" @click="$router.back()">返回列表</n-button>
              <n-button
                attr-type="button"
                type="success"
                @click="add"
                >提交数据</n-button
              >
            </n-space>
          </template>
        </n-card>
      </n-space>
    </n-grid-item>
  </n-grid>
</template>
<script lang="ts" setup>
import { reactive, computed, ref } from "vue";
import {
  emailOptions,
} from "@/app/admin/view/user/data.ts";
import { FormInst, NAutoComplete } from "naive-ui";
import { addUser } from "@/app/admin/api/user";
import { useRouter } from "vue-router";

const router = useRouter();

const formRef = ref<FormInst | null>(null);
const compData = reactive({
  from: {
    name: null,
    email: "",
    birthday: null,
    life_address: null,
    account: "",
    password: "",
    sex: 1,
  },
  rules: {
    name: {
      required: true,
      trigger: ["blur", "input"],
      message: "请输入用户名",
    },
    account: {
      required: true,
      trigger: ["blur", "input"],
      message: "请输入账号",
    },
    password: {
      required: true,
      trigger: ["blur", "input"],
      message: "请输入密码",
    },
    email: {
      required: true,
      trigger: ["blur"],
      message: "请输入邮箱",
    },
    birthday: {
      required: true,
      trigger: ["blur", "change"],
      message: "请选择时间",
    },
    life_address: {
      required: true,
      trigger: ["blur", "input"],
      message: "请输入工作城市",
    },
  },
  emailOptions: computed(() => {
    return emailOptions.map((suffix) => {
      const prefix = compData.from.email?.split("@")?.[0] || "";
      return {
        label: prefix + suffix,
        value: prefix + suffix,
      };
    });
  }),
});

// 提交数据
const add = (e: MouseEvent) => {
  e.preventDefault();
  formRef.value?.validate((errors) => {
    if (!errors) {
      addUser(compData.from)
        .then((res: any) => {
          if (res.status === "success") {
            window.$message.success("新增成功");
            router.back();
          } else {
            window.$message.error("新增失败");
          }
        });
    } else {
      window.$message.warning("请填写必填项");
    }
  });
};
</script>
